<!--  -->
<template>
    <view class="relative">
        <view class="absolute w-screen h-16 top-0"></view>
        <view class="bg-white rounded-lg px-4 pt-4 pb-2 mx-4 relative z-10">
            <view
                class="flex justify-between"
                @click="
                    $global.movePath('/pages/mine/children/SourceList/index')
                "
            >
                <view class="font-bold">房东服务</view>
                <uni-icons type="right" color="#a3af9c"></uni-icons>
            </view>
            <view
                v-if="list.length == 0"
                class="flex p-3 border my-2 items-center"
            >
                <view
                    class="rounded-sm w-12 aspect-square bg-gray-400/20 flex justify-center items-center"
                >
                    <uni-icons type="plusempty" color="#a3af9c"></uni-icons>
                </view>
                <view class="px-4">我要卖房</view>
            </view>
            <view>
                <view
                    v-for="(item, index) in list"
                    :key="index"
                    class="flex p-3 border my-2 relative"
                >
                    <view
                        class="absolute right-0 top-0 px-3 bg-red-600 rounded-es-lg text-white py-1"
                        >在售</view
                    >
                    <view>
                        <image
                            class="rounded-lg w-32 h-24"
                            mode="aspectFill"
                            src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
                        ></image>
                    </view>
                    <view
                        class="flex flex-col justify-center"
                        style="width: calc(100% - 8rem - 16rpx)"
                    >
                        <view class="text-base font-semibold">{{
                            item.title
                        }}</view>
                        <view class="mb-3">
                            <view>{{ item.desc }}</view>
                        </view>
                        <view class="flex items-end">
                            <view class="text-lg text-red-600 mr-5">{{
                                item.cost
                            }}</view>
                            <view class="text-gray-400">{{
                                item.average
                            }}</view>
                        </view>
                    </view>
                </view>
            </view></view
        >
    </view>
</template>

<script setup lang="ts">
import { $global } from "@/store";
import { ref } from "vue";
type listType = {
    title: string;
    desc: string;
    cost: string;
    average: string;
};
const list = ref<listType[]>([
    // {
    //     title: "奥林清华1幢103",
    //     desc: "4室2厅  |  170㎡",
    //     cost: "340万",
    //     average: "20000元/平",
    // },
    // {
    //     title: "奥林清华1幢103",
    //     desc: "4室2厅  |  170㎡",
    //     cost: "340万",
    //     average: "20000元/平",
    // },
]);
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
</style>
